<template>
  <div class="team-approval">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="header-text">
            <h1 class="page-title">{{ $t('team.teamApproval') }}</h1>
            <p class="page-description">{{ $t('team.teamApprovalDesc') }}</p>
          </div>
        </div>
        <div class="header-right">
          <el-button
            :icon="Refresh"
            @click="refreshTeams"
            :loading="loading"
            type="primary"
            size="large"
          >
            {{ $t('common.refresh') }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card pending">
        <div class="stat-background">
          <el-icon class="stat-bg-icon"><Clock /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ pendingTeams.length }}</div>
          <div class="stat-label">{{ $t('team.pendingTeams') }}</div>
          <div class="stat-trend">
            <span class="trend-text">{{ t('team.pendingStatus') }}</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Clock /></el-icon>
        </div>
      </div>

      <div class="stat-card approved">
        <div class="stat-background">
          <el-icon class="stat-bg-icon"><Check /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ approvedCount }}</div>
          <div class="stat-label">{{ $t('team.approvedTeams') }}</div>
          <div class="stat-trend">
            <span class="trend-text">{{ t('team.approvedStatus') }}</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Check /></el-icon>
        </div>
      </div>

      <div class="stat-card rejected">
        <div class="stat-background">
          <el-icon class="stat-bg-icon"><Close /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ rejectedCount }}</div>
          <div class="stat-label">{{ $t('team.rejectedTeams') }}</div>
          <div class="stat-trend">
            <span class="trend-text">{{ t('team.rejectedStatus') }}</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Close /></el-icon>
        </div>
      </div>
    </div>

    <!-- 待审核团队列表 -->
    <div class="teams-section">
      <div class="section-header">
        <div class="section-title">
          <el-icon class="title-icon"><UserFilled /></el-icon>
          <span>{{ $t('team.pendingTeamsList') }}</span>
          <el-tag v-if="pagination.total > 0" type="info" size="small">
            {{ pagination.total }} {{ t('team.teamsCount') }}
          </el-tag>
        </div>
        <div class="section-actions">
          <el-input
            v-model="searchKeyword"
            :placeholder="$t('team.searchPlaceholder')"
            style="width: 240px; margin-right: 12px"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>

      <div v-if="loading" class="loading-container">
        <div class="loading-content">
          <el-skeleton :rows="3" animated />
          <el-skeleton :rows="3" animated />
          <el-skeleton :rows="3" animated />
        </div>
      </div>

      <div v-else-if="pendingTeams.length === 0" class="empty-container">
        <div class="empty-content">
          <div class="empty-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <h3 class="empty-title">{{ $t('team.noPendingTeams') }}</h3>
          <p class="empty-description">{{ t('team.noPendingTeamsDesc') }}</p>
          <el-button type="primary" @click="refreshTeams" :loading="loading">
            {{ $t('common.refresh') }}
          </el-button>
        </div>
      </div>

      <div v-else class="teams-list">
        <div
          v-for="team in pendingTeams"
          :key="team.id"
          class="team-card"
        >
          <div class="team-card-header">
            <div class="team-avatar">
              <img
                v-if="team.teamAvatarUrl"
                :src="team.teamAvatarUrl"
                :alt="team.name"
              />
              <div v-else class="avatar-placeholder">
                <el-icon><UserFilled /></el-icon>
              </div>
            </div>

            <div class="team-basic-info">
              <h3 class="team-name">
                {{ team.name }}
                <el-tag type="warning" size="small" class="status-tag">
                  {{ getTeamStatusLabel(team.status) }}
                </el-tag>
              </h3>
              <p class="team-description">{{ team.description || $t('team.noDescription') }}</p>
            </div>

            <div class="team-actions">
              <el-button
                type="success"
                :icon="Check"
                @click="handleApprove(team)"
                :loading="team.approving"
                size="small"
              >
                {{ $t('team.approve') }}
              </el-button>

              <el-button
                type="danger"
                :icon="Close"
                @click="handleReject(team)"
                :loading="team.rejecting"
                size="small"
              >
                {{ $t('team.reject') }}
              </el-button>

              <el-button
                :icon="View"
                @click="handleViewDetail(team)"
                size="small"
                plain
              >
                {{ $t('common.detail') }}
              </el-button>
            </div>
          </div>

          <div class="team-card-body">
            <div class="team-meta-grid">
              <div class="meta-item">
                <div class="meta-icon">
                  <el-icon><User /></el-icon>
                </div>
                <div class="meta-content">
                  <span class="meta-label">{{ $t('team.creator') }}</span>
                  <span class="meta-value">{{ team.creatorName || `${t('team.userPrefix')}${team.creatorId}` }}</span>
                </div>
              </div>

              <div class="meta-item">
                <div class="meta-icon">
                  <el-icon><Calendar /></el-icon>
                </div>
                <div class="meta-content">
                  <span class="meta-label">{{ $t('team.createdAt') }}</span>
                  <span class="meta-value">{{ formatDate(team.createdAt, 'datetime') }}</span>
                </div>
              </div>

              <div class="meta-item">
                <div class="meta-icon">
                  <el-icon><User /></el-icon>
                </div>
                <div class="meta-content">
                  <span class="meta-label">{{ $t('team.maxMembers') }}</span>
                  <span class="meta-value">{{ team.maxMembers }} {{ t('team.peopleUnit') }}</span>
                </div>
              </div>

              <div class="meta-item">
                <div class="meta-icon">
                  <el-icon><Clock /></el-icon>
                </div>
                <div class="meta-content">
                  <span class="meta-label">{{ t('team.applicationDuration') }}</span>
                  <span class="meta-value">{{ formatDate(team.createdAt, 'relative') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <div v-if="pagination.total > 0" class="pagination-container">
          <div class="pagination-info">
            <span class="pagination-text">
              {{ t('team.paginationInfo', { total: pagination.total, size: pagination.size }) }}
            </span>
          </div>
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
          />
        </div>
      </div>
    </div>

    <!-- 团队详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      :title="$t('team.teamDetail')"
      width="600px"
      destroy-on-close
    >
      <div v-if="selectedTeam" class="team-detail">
        <div class="detail-section">
          <h4>{{ $t('team.basicInfo') }}</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item :label="$t('team.teamName')">
              {{ selectedTeam.name }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('team.teamStatus')">
              <el-tag :type="getTeamStatusType(selectedTeam.status)">
                {{ getTeamStatusLabel(selectedTeam.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('team.creator')">
              {{ selectedTeam.creatorId }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('team.maxMembers')">
              {{ selectedTeam.maxMembers }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('team.createdAt')" :span="2">
              {{ formatDate(selectedTeam.createdAt, 'full') }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div v-if="selectedTeam.description" class="detail-section">
          <h4>{{ $t('team.teamDescription') }}</h4>
          <p class="description-text">{{ selectedTeam.description }}</p>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDetailDialog = false">
            {{ $t('common.close') }}
          </el-button>
          <el-button 
            v-if="selectedTeam?.status === 'PENDING'"
            type="success" 
            :icon="Check"
            @click="handleApprove(selectedTeam)"
            :loading="selectedTeam?.approving"
          >
            {{ $t('team.approve') }}
          </el-button>
          <el-button 
            v-if="selectedTeam?.status === 'PENDING'"
            type="danger" 
            :icon="Close"
            @click="handleReject(selectedTeam)"
            :loading="selectedTeam?.rejecting"
          >
            {{ $t('team.reject') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Clock, Check, Close, Refresh, UserFilled, User,
  Calendar, View, Search
} from '@element-plus/icons-vue'
import { useTeamStore } from '@/stores/teamStore'
import { teamApi } from '@/api/team'
import { getTeamStatusLabel, getTeamStatusType } from '@/types/team'
import { formatDate } from '@/utils/date'
import type { Team } from '@/types/team'

// 扩展Team类型，添加加载状态
interface TeamWithLoading extends Team {
  approving?: boolean
  rejecting?: boolean
}

const { t } = useI18n()
const teamStore = useTeamStore()

// 响应式数据
const loading = ref(false)
const pendingTeams = ref<TeamWithLoading[]>([])
const showDetailDialog = ref(false)
const selectedTeam = ref<TeamWithLoading | null>(null)
const searchKeyword = ref('')

// 分页数据
const pagination = ref({
  current: 1,
  size: 10,
  total: 0
})

// 统计数据
const approvedCount = ref(0)
const rejectedCount = ref(0)

// 计算属性
const totalTeams = computed(() => pendingTeams.value.length + approvedCount.value + rejectedCount.value)

// 方法
const refreshTeams = async () => {
  try {
    loading.value = true
    // TODO: 调用获取待审核团队的API
    // 暂时使用模拟数据
    await loadPendingTeams()
  } catch (error) {
    console.error('Failed to refresh team list:', error)
    ElMessage.error(t('team.refreshError'))
  } finally {
    loading.value = false
  }
}

const loadPendingTeams = async () => {
  try {
    const response = await teamApi.getPendingTeams({
      page: pagination.value.current - 1, // 后端从0开始
      size: pagination.value.size,
      sortBy: 'createdAt',
      sortDir: 'asc'
    })

    pendingTeams.value = response.data.content || []
    pagination.value.total = response.data.totalElements || 0

    console.log('=== Loading pending teams ===')
    console.log('Team count:', pendingTeams.value.length)
    console.log('Total count:', pagination.value.total)
    console.log('========================')
  } catch (error) {
    console.error('Failed to load pending teams:', error)
    ElMessage.error(t('team.refreshError'))
    pendingTeams.value = []
    pagination.value.total = 0
  }
}

const handleApprove = async (team: TeamWithLoading) => {
  try {
    await ElMessageBox.confirm(
      t('team.approveConfirm', { teamName: team.name }),
      t('team.approveTeam'),
      {
        confirmButtonText: t('team.approve'),
        cancelButtonText: t('common.cancel'),
        type: 'success'
      }
    )

    team.approving = true
    await teamStore.approveTeam(team.id, true)
    
    // 从待审核列表中移除
    const index = pendingTeams.value.findIndex(t => t.id === team.id)
    if (index !== -1) {
      pendingTeams.value.splice(index, 1)
    }
    
    approvedCount.value++
    ElMessage.success(t('team.approveSuccess'))
    
    if (showDetailDialog.value) {
      showDetailDialog.value = false
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to approve team:', error)
    }
  } finally {
    team.approving = false
  }
}

const handleReject = async (team: TeamWithLoading) => {
  try {
    await ElMessageBox.confirm(
      t('team.rejectConfirm', { teamName: team.name }),
      t('team.rejectTeam'),
      {
        confirmButtonText: t('team.reject'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      }
    )

    team.rejecting = true
    await teamStore.approveTeam(team.id, false)
    
    // 从待审核列表中移除
    const index = pendingTeams.value.findIndex(t => t.id === team.id)
    if (index !== -1) {
      pendingTeams.value.splice(index, 1)
    }
    
    rejectedCount.value++
    ElMessage.success(t('team.rejectSuccess'))
    
    if (showDetailDialog.value) {
      showDetailDialog.value = false
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to reject team:', error)
    }
  } finally {
    team.rejecting = false
  }
}

const handleViewDetail = (team: TeamWithLoading) => {
  selectedTeam.value = team
  showDetailDialog.value = true
}

// 分页事件处理
const handleSizeChange = (newSize: number) => {
  pagination.value.size = newSize
  pagination.value.current = 1
  refreshTeams()
}

const handleCurrentChange = (newPage: number) => {
  pagination.value.current = newPage
  refreshTeams()
}

// 搜索处理
const handleSearch = () => {
  pagination.value.current = 1
  refreshTeams()
}

// 生命周期
onMounted(() => {
  refreshTeams()
})
</script>

<style scoped lang="scss">
.team-approval {
  padding: 24px;
  background: var(--el-bg-color-page);
  min-height: 100vh;

  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        display: flex;
        align-items: center;
        gap: 20px;

        .header-icon {
          width: 64px;
          height: 64px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(10px);

          .el-icon {
            font-size: 32px;
            color: white;
          }
        }

        .header-text {
          .page-title {
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 8px 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }

          .page-description {
            font-size: 16px;
            opacity: 0.9;
            margin: 0;
          }
        }
      }

      .header-right {
        .el-button {
          background: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: white;
          backdrop-filter: blur(10px);

          &:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
  }

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;

    .stat-card {
      position: relative;
      background: var(--el-bg-color);
      border-radius: 16px;
      padding: 24px;
      box-shadow: var(--el-box-shadow-light);
      border: 1px solid var(--el-border-color-light);
      overflow: hidden;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--el-box-shadow);
      }

      .stat-background {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.1;

        .stat-bg-icon {
          font-size: 48px;
        }
      }

      .stat-content {
        position: relative;
        z-index: 2;

        .stat-number {
          font-size: 36px;
          font-weight: 700;
          margin-bottom: 8px;
          line-height: 1;
        }

        .stat-label {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 8px;
          opacity: 0.8;
        }

        .stat-trend {
          .trend-text {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
          }
        }
      }

      .stat-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;

        .el-icon {
          font-size: 24px;
        }
      }

      &.pending {
        .stat-background {
          background: var(--el-color-warning);
        }
        .stat-number {
          color: var(--el-color-warning);
        }
        .stat-icon {
          background: var(--el-color-warning-light-9);
          color: var(--el-color-warning);
        }
        .trend-text {
          background: var(--el-color-warning-light-9);
          color: var(--el-color-warning);
        }
      }

      &.approved {
        .stat-background {
          background: var(--el-color-success);
        }
        .stat-number {
          color: var(--el-color-success);
        }
        .stat-icon {
          background: var(--el-color-success-light-9);
          color: var(--el-color-success);
        }
        .trend-text {
          background: var(--el-color-success-light-9);
          color: var(--el-color-success);
        }
      }

      &.rejected {
        .stat-background {
          background: var(--el-color-danger);
        }
        .stat-number {
          color: var(--el-color-danger);
        }
        .stat-icon {
          background: var(--el-color-danger-light-9);
          color: var(--el-color-danger);
        }
        .trend-text {
          background: var(--el-color-danger-light-9);
          color: var(--el-color-danger);
        }
      }
    }
  }

  .teams-section {
    background: var(--el-bg-color);
    border-radius: 16px;
    box-shadow: var(--el-box-shadow-light);
    overflow: hidden;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 32px;
      background: var(--el-bg-color-page);
      border-bottom: 1px solid var(--el-border-color-lighter);

      .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);

        .title-icon {
          font-size: 20px;
          color: var(--el-color-primary);
        }
      }

      .section-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }
    }

    .loading-container {
      padding: 40px 32px;

      .loading-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
    }

    .empty-container {
      padding: 80px 32px;

      .empty-content {
        text-align: center;

        .empty-icon {
          width: 80px;
          height: 80px;
          margin: 0 auto 24px;
          background: var(--el-color-primary-light-9);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .el-icon {
            font-size: 40px;
            color: var(--el-color-primary);
          }
        }

        .empty-title {
          font-size: 20px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin: 0 0 8px 0;
        }

        .empty-description {
          font-size: 14px;
          color: var(--el-text-color-secondary);
          margin: 0 0 24px 0;
        }
      }
    }

    .teams-list {
      padding: 24px 32px;

      .team-card {
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 12px;
        margin-bottom: 20px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: var(--el-box-shadow-light);

        &:hover {
          border-color: var(--el-color-primary);
          box-shadow: var(--el-box-shadow);
          transform: translateY(-2px);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .team-card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 24px;
          background: var(--el-bg-color-page);
          border-bottom: 1px solid var(--el-border-color-lighter);

          .team-avatar {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            overflow: hidden;
            margin-right: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .avatar-placeholder {
              width: 100%;
              height: 100%;
              background: linear-gradient(135deg, var(--el-color-primary-light-7), var(--el-color-primary-light-5));
              display: flex;
              align-items: center;
              justify-content: center;

              .el-icon {
                font-size: 28px;
                color: white;
              }
            }
          }

          .team-basic-info {
            flex: 1;

            .team-name {
              display: flex;
              align-items: center;
              gap: 12px;
              font-size: 18px;
              font-weight: 600;
              color: var(--el-text-color-primary);
              margin: 0 0 8px 0;

              .status-tag {
                font-size: 12px;
              }
            }

            .team-description {
              font-size: 14px;
              color: var(--el-text-color-secondary);
              margin: 0;
              line-height: 1.5;
              max-width: 400px;
            }
          }
        }

        .team-card-body {
          padding: 24px;

          .team-meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;

            .meta-item {
              display: flex;
              align-items: center;
              gap: 12px;
              padding: 16px;
              background: var(--el-bg-color-page);
              border-radius: 8px;
              border: 1px solid var(--el-border-color-lighter);

              .meta-icon {
                width: 40px;
                height: 40px;
                background: var(--el-color-primary-light-9);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                .el-icon {
                  font-size: 18px;
                  color: var(--el-color-primary);
                }
              }

              .meta-content {
                flex: 1;

                .meta-label {
                  display: block;
                  font-size: 12px;
                  color: var(--el-text-color-secondary);
                  margin-bottom: 4px;
                }

                .meta-value {
                  display: block;
                  font-size: 14px;
                  font-weight: 500;
                  color: var(--el-text-color-primary);
                }
              }
            }
          }
        }

        .team-actions {
          display: flex;
          gap: 8px;
          flex-shrink: 0;

          .el-button {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-1px);
            }
          }
        }
      }
    }

    .pagination-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 32px;
      background: var(--el-bg-color-page);
      border-top: 1px solid var(--el-border-color-lighter);

      .pagination-info {
        .pagination-text {
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }

      .el-pagination {
        --el-pagination-bg-color: var(--el-bg-color);
        --el-pagination-button-bg-color: var(--el-bg-color);
      }
    }
  }

  .team-detail {
    .detail-section {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      h4 {
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0 0 12px 0;
      }

      .description-text {
        color: var(--el-text-color-regular);
        line-height: 1.6;
        margin: 0;
      }
    }


  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .team-approval {
    .stats-cards {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .teams-section {
      .teams-list {
        .team-card {
          .team-meta-grid {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .team-approval {
    padding: 16px;

    .page-header {
      padding: 24px;

      .header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;

        .header-left {
          flex-direction: column;
          gap: 16px;
        }
      }
    }

    .stats-cards {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .teams-section {
      .section-header {
        flex-direction: column;
        gap: 16px;
        padding: 20px;

        .section-actions {
          width: 100%;

          .el-input {
            width: 100% !important;
          }
        }
      }

      .teams-list {
        padding: 20px;

        .team-card {
          .team-card-header {
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;

            .team-actions {
              width: 100%;
              justify-content: flex-start;
              flex-wrap: wrap;
            }
          }

          .team-meta-grid {
            grid-template-columns: 1fr;
            gap: 12px;
          }
        }
      }

      .pagination-container {
        flex-direction: column;
        gap: 16px;
        padding: 20px;

        .pagination-info {
          text-align: center;
        }
      }
    }
  }
}
</style>
